{extend name="admin@public/base" /}

{block name="body"}
{volist name="css" id="vcss"}
<link rel="stylesheet" href="{$css}">
{/volist}


    <div class="layui-form" style="margin: 20px;">

        <div class="layui-btn-group demoTable">

            {volist name="button" id="vbtn"}
            <a class="layui-btn {$vbtn.extra.class?:''}" data-url="{$vbtn.extra.url?:''}"
               href="{$vbtn.extra.href?:'javascript:'}" data-role="{$vbtn['extra']['data-role']?:''}">{$vbtn.text}</a>
            {/volist}
        </div>


        <table class="layui-table" data-table="{$table}">
            <colgroup>
                <col width="20">
                {volist name="field" id="vfield"}
                <col>
                {/volist}
                <col>
            </colgroup>
            <thead>
            <tr>
                <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
                {volist name="field" id="vfield"}
                <th>{$vfield.title}</th>
                {/volist}
                <th style="text-align: center">操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="data['data']" id="vdata"}
            <tr>
                <td><input type="checkbox" name="ids" value="{$vdata.id}" lay-skin="primary"></td>
                {volist name="field" id="vfield"}
                {switch name="vfield.type"}
                {case value="checkbox"}

                {/case}
                {case value="status"}
                <td>{$vdata[$vfield['field']]|render_status='aa'|raw}</td>
                {/case}

                {case value="html"}
                <td>{$vdata[$vfield['field']]|raw}</td>
                {/case}

                {default/}
                <td>{$vdata[$vfield['field']]}</td>
                {/switch}

                {/volist}

                <td data-field="10" align="center" data-off="true">
                    {volist name="action" id="vact"}
                    <a href="{$vbtn.extra.href?:'javascript:'}" class="layui-btn layui-btn-xs {$vact.extra.class?:''}"
                       data-url="{$vact.extra.url?:''}" data-role="{$vact.extra.data_role?:'redirect'}">{$vact.text}</a>
                    {/volist}

                </td>
            </tr>
            {/volist}
            </tbody>
        </table>

        <div id="page"></div>
    </div>

{/block}
{block name="js"}
{volist name="js" id="vjs"}
<script src="{$vjs}"></script>
{/volist}


<script>
    layui.use(['table', 'form', 'laypage'], function () {


        var $ = layui.jquery, form = layui.form;
        //全选
        form.on('checkbox(allChoose)', function (data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });


        var get_checked = function () {
            var ids = [];
            $('input[name="ids"]').each(function (index, element) {
                $(element).is(':checked') && ids.push($(element).val())
            });
            return ids;
        };

        $('[data-role="get_checked"]').click(function () {
            alert(get_checked())
        });


        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            , layout: ['count', 'prev', 'page', 'next', 'skip']
            , count: "{$data.total?:1}" //数据总数，从服务端得到
            , limit: "{$data.listRows?:50}"
            , curr: "{$data.currentPage?:1}"
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                //首次不执行
                if (!first) {
                    //do something
                    go_to_page(obj.curr);
                }
            }
        });

    });
</script>

{/block}